<template>
  <div class="detail-tab-bar">
    <div v-if="!isCollect" class="detail-tab-bar-item" @click="collectClick">
      <img src="@/assets/icon/icon_collect.png" alt="" />
    </div>
    <div v-else class="detail-tab-bar-item" @click="collectClick">
      <img src="@/assets/icon/icon_collect_checked.png" alt="" />
    </div>
    <div class="detail-tab-bar-item" @click="cartClick">
      <img src="@/assets/icon/ic_menu_shoping_nor.png" alt="" />
      <span class="main-count">{{ getCounts }}</span>
    </div>
    <div class="detail-tab-bar-item" @click="buyClick">立即购买</div>
    <div class="detail-tab-bar-item shop-car" @click="addClick">加入购物车</div>
  </div>
</template>

<script>
import { getCartList } from "@/network/cart";
export default {
  props: {
    cartList: {
      type: Array,
      default() {
        return [];
      },
    },
    isCollect: {
      type: Boolean,
      default() {
        return false
      }
    } 
  },
  computed: {
    getCounts() {
      if (this.cartList) {
        // console.log(this.cartList)
        return this.cartList.reduce((preValue, val) => {
          return (preValue += val.number);
        }, 0);
      } else {
        return 0;
      }
    },
  },
  methods: {
    addClick() {
      this.$emit("addClick");
    },
    buyClick() {
      this.$emit("buyClick");
    },
    cartClick() {
      this.$router.push({
        path: "/cart",
      });
    },
    collectClick() {
      this.$emit('collectClick')
    }
  },
};
</script>

<style lang="scss" scoped>
.detail-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2031;
  // z-index: 2000;
  display: flex;
  height: 49px;
  background-color: #fff;
  .detail-tab-bar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 23px;
    }
    .main-count {
      position: relative;
      left: -5px;
      top: -10px;
      width: 14px;
      padding: 1px;
      height: 14px;
      background-color: #f00;
      border-radius: 50%;
      color: #fff;
      text-align: center;
    }
  }
  .shop-car {
    background-color: #b4282d;
    color: #fff;
  }
}
</style>